<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>显示与光标</title>
		<style>
			/* 添加背景图 */
			div{
				width: 100px;
				height: 100px;
				background: url(img/荷兰猪.png);
				background-size: 100%;
				/* 显示属性  display作用：将盒子模型中
					块，行，行内块元素自由切换显示
					显示属性值：none 将盒子模型从页面消失
							   block 将盒子模型当中的元素转换为块元素
							   inline 将盒子模型中的元素变成行元素
					---理论：行转块，块转行原则针对盒子模型中元素
					属性值：遮罩层，左栏--none隐藏  block显示 
				*/
				margin: auto;
				b order: 1px solid red;
				/* display: none; */
				/* display: block; */
				displa y: inline-block;
				disp lay: none;
				/* 块转行，行内元素的宽高由内容定
					div 特点有宽无高 
				 */
				/* cursor: crosshair; */
				/* cursor: text; */
				/* cursor: wait; */
				cursor: help;
			}
			/* p添加一张背景图片  500*500 */
			p{
				width: 500px;
				height: 500px;
				background: url(img/仓鼠.png);
				background-size: 100%;
				/* 显示属性: 隐藏
				 visibility: hidden; 和 display: none 区别
				 visibility:hidden; 特点：盒子模型存在,内容隐藏
				 display:none; 盒子模型不存在，内容消失
				 */
				visib ility: hidden;
				/* 光标属性 cursor 属性值
								pointer 指针
								crosshair 十字准线
								text 文本
								wait 加载等待
								help 帮助
				 */
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div></div>
		哼哼哼~~~·
		<p></p>
		吱吱吱~~~
	</body>
</html>